<template>
	<view class="containar">
		<view class="containar-box">
			<view class="avatarUrl">
				<text class="icon-text">头像:</text>
				<button class="login-btn" open-type="chooseAvatar" @chooseavatar="ChooseAvatar">
					<image :src="avatarUrl||icon" class="refreshIcon"></image>
				</button>
			</view>

			<view class="nickname">
				<text class="icon-text">昵称:</text>
				<input type="nickname" class="weui-input" :value="nickName" @blur="bindblur" placeholder="请输入昵称"
					@input="bindinput" />
			</view>
		</view>
		<view class="btn">
			<view class="btn-sub" @click="onSubmit">保存</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				avatarUrl: '',
				nickName: '',
				icon: 'http://mms2.baidu.com/it/u=2541259901,1225815324&fm=253&app=138&f=JPEG&fmt=auto&q=75?w=500&h=500'
			};
		},
		computed: {
			...mapState('m_user', ['redirectInfo'])
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateRedirectInfo']),
			bindblur(e) {
				this.nickName = e.detail.value; // 获取微信昵称
			},
			bindinput(e) {
				this.nickName = e.detail.value; //这里要注意如果只用blur方法的话用户在输入玩昵称后直接点击保存按钮，会出现修改不成功的情况。
			},
			ChooseAvatar(e) {
				this.avatarUrl = e.detail.avatarUrl
			},
			onChooseavatar(e) {
				let self = this;
				let {
					avatarUrl
				} = e.detail;
				uni.showLoading({
					title: '加载中'
				});
				uni.uploadFile({
					url: '后台uploadFile接口',
					filePath: avatarUrl,
					name: 'file',
					header: {
						token: '自己的token',
					},
					success: uploadFileRes => {
						// 注意：这里返回的uploadFileRes.data 为JSON 需要自己去转换
						let data = JSON.parse(uploadFileRes.data);
						if (data.code === 0) {
							this.avatarUrl = data.data;
						}
					},
					fail: (error) => {
						uni.showToast({
							title: error,
							duration: 2000
						});
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			onSubmit() {
				if (this.nickName === '') {
					uni.showToast({
						icon: 'none',
						title: '请输入昵称'
					})
					return false;
				}
				// if(this.avatarUrl === '')
				// 这里做自己公司的存储逻辑
				this.updateUserInfo({
					avatarUrl: this.avatarUrl || this.icon,
					nickName: this.nickName
				})
				if (this.redirectInfo && this.redirectInfo.openType === 'navigateTo') {
					uni.switchTab({
						url: this.redirectInfo.from,
						complete: () => {
							this.updateRedirectInfo(null)
						}
					})
				}
			},
			// 获取微信用户的基本信息
			onChooseAvatar(e) {
				console.log(e);
				// 判断是否获取用户信息成功
				// if (e.detail.errMsg === 'getUserInfo:fail auth deny') return uni.$showMsg('您取消了登录授权')
				// 获取用户信息成功， e.detail.userInfo 就是用户的基本信息
				// console.log(e.detail.userInfo)
				// if (e.detail.errMsg === 'getUserInfo:ok') {
				// 	this.updateUserInfo(e.detail.userInfo)
				// 	// 调用登录方法
				// 	this.getToken(e.detail)
				// }
			},
			async getToken(info) {
				// 1.获取登录所需要的code值(微信提供的wx.login()方法)
				const [err, res] = await uni.login().catch(err => err)
				// console.log(err);
				if (err || res.errMsg !== 'login:ok') return uni.$showMsg('登录失败')
				console.log(res);
				// 2.准备请求参数
				const userinfoObj = {
					code: res.code,
					encryptedData: info.encryptedData,
					iv: info.iv,
					rawData: info.rawData,
					signature: info.signature
				}
				// 3.调用微信登录接口
				const {
					data: loginResult
				} = await uni.$http.post('/api/public/v1/users/wxlogin', userinfoObj)
				console.log(loginResult);
				// if (loginResult.meta.status !== 200) return uni.$showMsg('登录失败')
				// uni.$showMsg('登录成功')

				// 把登录成功后的token存进Vuex中
				// this.updateToken(loginResult.message.token)
				this.updateToken('Bearer IKUN')
			}
		}
	};
</script>

<style lang="scss">
	.containar {
		padding: 0 20rpx;

		.containar-box {
			border-radius: 10rpx;
			margin-top: 20rpx;
			padding: 10rpx 20rpx;
			box-shadow: 0px 0px 20px #DDDDDD;
		}

		.avatarUrl {
			display: flex;
			align-items: center;



			.login-btn {
				width: 160rpx;
				height: 160rpx;
				box-sizing: border-box;
				border-radius: 50%;
				margin: 0;
				margin-left: 162rpx;
				padding: 0;
				border: 4rpx solid #FFF;
				box-shadow: 0px 0px 20px #DDDDDD;


				.refreshIcon {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;

				}
			}

			.jt {
				width: 14rpx;
				height: 28rpx;
			}
		}

		.nickname {
			display: flex;
			align-items: center;
			height: 120rpx;

			.weui-input {
				padding-left: 30rpx;
				margin-left: 140rpx;
			}
		}

		.btn {
			width: 100%;

			.btn-sub {
				width: 670rpx;
				margin: 80rpx auto 0;
				height: 90rpx;
				box-shadow: 0px 0px 20px #DDDDDD;
				border-radius: 45rpx;
				line-height: 90rpx;
				text-align: center;
				font-size: 36rpx;
			}
		}

		.icon-text,
		.btn-sub {
			background-image: -moz-linear-gradient(90deg, rgb(255, 199, 214), rgb(192, 173, 255));
			background-image: -webkit-linear-gradient(90deg, rgb(255, 199, 214), rgb(192, 173, 255));
			background-image: linear-gradient(90deg, rgb(255, 199, 214), rgb(192, 173, 255));
			/* 设置背景色渐变 */
			// background-image: linear-gradient(to right, #51D88F, #31BDD0);
			/* 设置背景以文字进行裁切 */
			background-clip: text;
			-webkit-background-clip: text;
			/* 设置文本颜色透明以露出后面裁切成文本形状的渐变背景 */
			color: transparent;
		}
	}
</style>
